<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link type="text/css" href="css/style.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<link href="css/swiper.css" rel="stylesheet">
		<style type="text/css">
			.navbar {
				margin-bottom: auto;
			}
			
			.logo {
				padding: 0;
			}
			
			.tupian {
				height: 50px;
			}
			
			.picture {
				width: 100%;
				margin-right: 10px;
			}
			
			#back {
				background-color: #EAB54D;
				padding-top: 120px;
			}
			
			.swiper {
				padding-top: 80px;
			}
			
			#gallery {
				width: 1200px;
			}
			
			.dfk {
				background-color: #FDF5E1;
				width: 800px;
				padding-top: 20px;
				padding-bottom: 3px;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			
			.button {
				width: 35px;
				height: 30px;
				border: none;
				margin-top: 2px;
				border-bottom-right-radius: 2px;
				border-top-right-radius: 2px;
				background-color: #00BE06;
			}
			
			.dh {
				width: 200px;
				height: 30px;
				border: #FFFFFF 2px solid;
				background-color: #FFFFFF;
				float: left;
				margin-top: 3px;
				border-bottom-left-radius: 2px;
				border-top-left-radius: 2px;
				outline: none;
			}
			
			.input-group-addon {
				color: white;
			}
			
			.a {
				margin-left: 50px;
			}
			
			.wangguan {
				width: 834px;
				padding-right: 15px;
				padding-top: 30px;
			}
			
			.choujiang {
				background-color: #FDF5E1;
				width: 800px;
				padding-bottom: 60px;
				margin-top: 70px;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			
			.anniu {
				padding-top: 10px;
			}
			
			.cjback {
				padding-top: 10px;
				width: 800px;
				padding-bottom: 30px;
			}
			
			#lottery {
				width: 570px;
				height: 510px;
				margin: 2px auto;
			}
			
			#lottery table td {
				position: relative;
				width: 190px;
				height: 170px;
				text-align: center;
				font-index: -999;
			}
			
			#lottery table td img {
				display: block;
				width: 180px;
				height: 180px;
			}
			
			#lottery table td a {
				width: 180px;
				height: 190px;
				display: block;
				text-decoration: none;
				no-repeat top center;
			}
			
			#lottery table td.active .mask {
				display: block;
			}
			
			.mask {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background-color: rgba(252, 211, 4, 0.5);
				display: none;
			}
			
			.banquan {
				padding-top: 50px;
				padding-bottom: 70px;
				color: white;
			}
			
			a {
				font-size: 12px;
				color: black;
			}
			
			a:hover {
				color: green;
			}
			
			p {
				font-size: 11px;
			}
			
			.tubiao1 {
				width: 250px;
				height: 65px;
				position: absolute;
				top: 30px;
				left: 155px;
			}
			
			.chatu {
				position: relative;
			}
			
			.an {
				border-radius: 100px;
				width: 120px;
				height: 35px;
				position: absolute;
				top: 45px;
				left: 1040px;
				background-color: #5AA700;
				color: white;
				border: none;
			}
			
			.shangchuan {
				position: absolute;
				min-width: 90px;
				padding-top: 10px;
			}
			
			.bfjl {
				padding-top: 185px;
				width: 245px;
				height: 250px;
				left: -150px;
				text-align: center;
			}
			
			.xiaoxi {}
		</style>
	</head>

	<body>
		<!--导航条-->
		<nav class="navbar navbar-inverse">
			<div class="container">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
						<a class="logo" href="index.html"><img src="img/2019-12-09_083755.png" class="tupian"></a>
					</div>

					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">

							<li>
								<a href="index.html">首页</a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">导航 <span class="caret"></span></a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">Action</a>
									</li>
									<li>
										<a href="#">Another action</a>
									</li>
									<li>
										<a href="#">Something else here</a>
									</li>
									<li role="separator" class="divider"></li>
									<li>
										<a href="#">Separated link</a>
									</li>
									<li role="separator" class="divider"></li>
									<li>
										<a href="#">One more separated link</a>
									</li>
								</ul>
							</li>
						</ul>
						<form class="navbar-form navbar-left" role="search">

							<div class="form-group a">
								<input type="text" placeholder="从前有座灵剑山" class="dh">
								<button class="input-group-addon glyphicon glyphicon-search button" id="basic-addon1"></button>
							</div>
						</form>

						<ul class="nav navbar-nav">
							<li>
								<a href="#" onclick="btn1()">登录</a>
							</li>
							<li>
								<a href="ZhuCe1.html">注册</a>
							</li>
							<li>
								<a href="#">开通VIP</a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="img/2019-12-09_142120.png" />上传 <span class="caret"></span></a>
								<ul class="dropdown-menu shangchuan">
									<li>
										<a href="#">
											<p>上传视频</p>
										</a>
									</li>
									<li>
										<a href="#">
											<p>制作视频</p>
										</a>
									</li>
									<li>
										<a href="#">
											<p>我的空间</p>
										</a>
									</li>
									<li>
										<a href="#">
											<p>视频管理</p>
										</a>
									</li>
									<li>
										<a href="#">
											<p>流量分析</p>
										</a>
									</li>
									<li>
										<a href="#">
											<p>申请分成</p>
										</a>
									</li>
								</ul>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">消息 <span class="caret"></span></a>
								<ul class="dropdown-menu bfjl">
									您暂时还没有任何消息
									<li role="separator" class="divider"></li>
									<li>
										<a href="#">查看其它内容>></a>
									</li>
								</ul>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">播放记录 <span class="caret"></span></a>
								<ul class="dropdown-menu bfjl">
									您还没有观看任何视频
									<li role="separator" class="divider"></li>
									<li>
										<a href="#">更多>></a>
									</li>
								</ul>
							</li>
					</div>
				</div>
			</div>
		</nav>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="js/mt-tabpage.js"></script>
		<script type="text/javascript">
			$(function() {

				$('[js-tab=2]').tab({
					mouse: 'over', //切换方式：over，click
					autoPlay: true, //播放方式：false，true
					curDisplay: 1, //当前第一个打开
					changeMethod: 'horizontal' //切换选项：默认default，horizontal，vertical，opacity这4种方式
				});

				$('[js-tab=3]').tab({
					curDisplay: 2,
					changeMethod: 'horizontal'
				});

			});
		</script>
		<!--轮播图-->
		<div class="chatu">
			<img src="img/2019-12-06_214718.png" class="tubiao1" />
			<input type="button" value="活动规则" class="an" />
		</div>
		<div id="back">
			<div class="swiper-container" id="gallery">
				<!--<div class="chatu">
					<img src="img/2019-12-06_214718.png" class="tubiao"/>
				</div>-->
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="img/2019-12-11_152408.png" alt="轮播图" class="picture">
					</div>
					<div class="swiper-slide">
						<img src="img/2019-12-11_152441.png" alt="轮播图" class="picture">
					</div>
					<div class="swiper-slide">
						<img src="img/2019-12-11_152501.png" alt="轮播图" class="picture">
					</div>
					<div class="swiper-slide">
						<img src="img/2019-12-11_152516.png" alt="轮播图" class="picture">
					</div>
					<div class="swiper-slide">
						<img src="img/2019-12-11_152534.png" alt="轮播图" class="picture">
					</div>
				</div>
				<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
			</div>

			<div class="swiper-container swiper-container-thumbs" id="thumbs">
				<div class="swiper-wrapper" style="transition-duration: 0ms;">
					<div class="swiper-slide">

					</div>
					<div class="swiper-slide">

					</div>
					<div class="swiper-slide">

					</div>
					<div class="swiper-slide">

					</div>

				</div>
				<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
			</div>

			<script type="text/javascript" src="js/swiper.min.js"></script>
			<script type="text/javascript">
				var thumbsSwiper = new Swiper('#thumbs', {
					spaceBetween: 5,
					slidesPerView: 5,
					watchSlidesVisibility: true, //防止不可点击
				})
				var gallerySwiper = new Swiper('#gallery', {
					effect: 'coverflow',
					spaceBetween: 5, //缩略图间距
					slidesPerView: 2,
					centeredSlides: true,
					initialSlide: 2,
					loop: true,
					autoplay: true,
					thumbs: {
						swiper: thumbsSwiper,
					}
				})
			</script>
			<!--vip精选-->
			<div id="vip" align="center">
				<img src="img/2019-12-11_101316.png" class="wangguan" />
				<div class="dfk">
					<div class="container ">
						<div class="row">
							<div class="col-md-4">
								<a href="#" class="thumbnail">
									<img src="img/2019-12-06_214224.png" class="vip-picture">
								</a>
							</div>
							<div class="col-md-4">
								<a href="#" class="thumbnail">
									<img src="img/2019-12-06_214239.png" class="vip-picture">
								</a>
							</div>
						</div>
					</div>
				</div>
				<img src="img/2019-12-11_101316.png" class="wangguan" />
				<div class="dfk">
					<div class="container ">
						<div class="row">
							<div class="col-md-4">
								<a href="#" class="thumbnail">
									<img src="img/2019-12-06_214257.png" class="vip-picture">
								</a>
							</div>
							<div class="col-md-4">
								<a href="#" class="thumbnail">
									<img src="img/2019-12-06_214311.png" class="vip-picture">
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--过渡-->
			<div align="center">
				<div class="choujiang">
					<img src="img/2019-12-11_161049.png" class="cjback" />
					<!--抽奖活动-->
					<div id="lottery">
						<table border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td class="lottery-unit lottery-unit-0"><img src="img/2019-12-06_214339.png" />
									<div class="mask"></div>
								</td>
								<td class="lottery-unit lottery-unit-1"><img src="img/2019-12-06_214351.png" />
									<div class="mask"></div>
								</td>
								<td class="lottery-unit lottery-unit-2"><img src="img/2019-12-06_214409.png" />
									<div class="mask"></div>
								</td>
							</tr>
							<tr>
								<td class="lottery-unit lottery-unit-7"><img src="img/2019-12-06_214426.png" />
									<div class="mask"></div>
								</td>
								<td>
									<a href="#"><img src="img/2019-12-06_214605.png" class="anniu" /></a>
								</td>
								<td class="lottery-unit lottery-unit-3"><img src="img/2019-12-06_214443.png" />
									<div class="mask"></div>
								</td>
							</tr>
							<tr>
								<td class="lottery-unit lottery-unit-6"><img src="img/2019-12-06_214457.png" />
									<div class="mask"></div>
								</td>
								<td class="lottery-unit lottery-unit-5"><img src="img/2019-12-06_214513.png" />
									<div class="mask"></div>
								</td>
								<td class="lottery-unit lottery-unit-4"><img src="img/2019-12-06_214549.png" />
									<div class="mask"></div>
								</td>
							</tr>
						</table>
					</div>

					<!--登录页面-->
					<div id="mymodal" class="modal fade">
						<div id="" class="modal-dialog">
							<div class="modal-content" style="width: 400px; height: 400px;">
								<div class="modal-header">
									<h4>爱奇艺&ensp;·&ensp;登录</h4>
								</div>
								<div class="modal-body">
									<div class=" row " style="margin-top: 30px;">
										<div class="col-md-3 dlfs ">
											<a href="ZhuCe1.html"><img src="img/2019-12-13_145046.png " width="50px " /></a>
										</div>
										<div class="col-md-3 dlfs ">
											<a href="WeiBo.html"><img src="img/2019-12-13_145059.png " width="50px " /></a>
										</div>
										<div class="col-md-3 dlfs ">
											<a href="QQDengLu.html"><img src="img/2019-12-13_145107.png " width="50px " /></a>
										</div>
										<div class="col-md-3 dlfs ">
											<a href="BaiDu.html"><img src="img/2019-12-13_145122.png " width="50px " /></a>
										</div>
									</div>
									<div class="row " style="margin-top: 10px;">
										<div class="col-md-3 " style="padding-left: 25px;margin-top: 25px; ">
											<a href="ZhiFuBao.html"><img src="img/2019-12-13_145129.png " width="50px " /></a>
										</div>
										<div class="col-md-3 " style="padding-left: 25px;margin-top: 20px; ">
											<a href="WeiXin.html"><img src="img/2019-12-13_145152.png" width="58px " /></a>
										</div>
									</div>
									<div class="row" style="text-align: center;margin-top: 45px;">
										<div class="col-md-12 ys " id="e">
											登录即代表同意
											<a href="# ">用户协议</a>和
											<a href="# ">隐私政策</a>
										</div>
									</div>
								</div>

								<div class="modal-footer ">
									<div class="row ">
										<div class="col-md-12">
											<a href="ZhuCe1.html" style="margin-right: 140px;">注册</a>
											<a href="ZhangHanoDenLu.html">账号密码登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
											<a href="SaoMaDengLu.html">手机扫描登录</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<script src="jquery-latest.js"></script>
					<script type="text/javascript">
						function btn1() {
							$('.modal').modal();
						}
						var lottery = {
							index: -1, //当前转动到哪个位置，起点位置
							count: 0, //总共有多少个位置
							timer: 0, //setTimeout的ID，用clearTimeout清除
							speed: 20, //初始转动速度
							times: 0, //转动次数
							cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
							prize: -1, //中奖位置
							init: function(id) {
								if($("#" + id).find(".lottery-unit").length > 0) {
									$lottery = $("#" + id);
									$units = $lottery.find(".lottery-unit");
									this.obj = $lottery;
									this.count = $units.length;
									$lottery.find(".lottery-unit-" + this.index).addClass("active");
								};
							},
							roll: function() {
								var index = this.index;
								var count = this.count;
								var lottery = this.obj;
								$(lottery).find(".lottery-unit-" + index).removeClass("active");
								index += 1;
								if(index > count - 1) {
									index = 0;
								};
								$(lottery).find(".lottery-unit-" + index).addClass("active");
								this.index = index;
								return false;
							},
							stop: function(index) {
								this.prize = index;
								return false;
							}
						};

						function roll() {
							lottery.times += 1;
							lottery.roll(); //转动过程调用的是lottery的roll方法，这里是第一次调用初始化
							if(lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
								clearTimeout(lottery.timer);
								lottery.prize = -1;
								lottery.times = 0;
								click = false;
							} else {
								if(lottery.times < lottery.cycle) {
									lottery.speed -= 10;
								} else if(lottery.times == lottery.cycle) {
									var index = Math.random() * (lottery.count) | 0; //中奖物品通过一个随机数生成
									lottery.prize = index;
								} else {
									if(lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
										lottery.speed += 110;
									} else {
										lottery.speed += 20;
									}
								}
								if(lottery.speed < 40) {
									lottery.speed = 40;
								};
								//console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
								lottery.timer = setTimeout(roll, lottery.speed); //循环调用
							}
							return false;
						}

						var click = false;

						window.onload = function() {
							lottery.init('lottery');
							$("#lottery a").click(function() {
								if(click) { //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
									return false;
								} else {
									lottery.speed = 100;
									roll(); //转圈过程不响应click事件，会将click置为false
									click = true; //一次抽奖完成后，设置click为true，可继续抽奖
									return false;
								}
							});
						};
					</script>
				</div>
				<div class="banquan">
					反盗版和反导链权利声明 Copyright @ 2019 爱奇艺 All Rights Reserved
				</div>
			</div>
		</div>
		<hr />
		<div class="container" style="padding-top: 10px; padding-bottom: 10px; background-color:#F8F8F8; width: 100%;">
			<div class="row">
				<div class="col-md-12 text-center">
					<div>
						<a href="#">公司介绍&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;新闻动态&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;联系方式&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;招聘英才&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;爱奇艺实验室&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;开放平台&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;爱奇艺号认证&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;爱奇艺号&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;爱奇艺会员合作&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;帮助中心&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;侵权举报与投诉&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;用户协议&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;隐私政策&nbsp;&nbsp;</a>|
						<a href="#">&nbsp;About Us</a>
					</div>
					<p></p>
					<p>
						Copyright © 2019 爱奇艺 All Rights Reserved</p>
				</div>
			</div>
		</div>
	</body>

</html>